<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>岗位支付页</title>
		<link rel="stylesheet" type="text/css" href="../../css/base.css">
		<link rel="stylesheet" type="text/css" href="../../css/weui.min.css">
		<!-- <link rel="stylesheet" href="../../css/mui.min.css" />-->
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<style>
			html, body {
				width: 100%;
				height: 100%;
				background: #FFFFFF;
				margin: 0px;
			}
			p {
				display: block;
				-webkit-margin-before: 0em;
				-webkit-margin-after: 0em;
				-webkit-margin-start: 0px;
				-webkit-margin-end: 0px;
			}
			li {
				list-style-type: none;
				/*height: 51px;*/
				width: 100%;
			}
			ul, menu, dir {
				display: block;
				list-style-type: disc;
				-webkit-margin-before: 0em;
				-webkit-margin-after: 0em;
				-webkit-margin-start: 0px;
				-webkit-margin-end: 0px;
				-webkit-padding-start: 0px;
			}
			.order_title {
				width: 100%;
				height: 44px;
				display: -webkit-box;
				background: #18B4ED;
			}
			.title_back {
				width: 60px;
			}
			.title_back img {
				width: 12px;
				height: 20px;
				padding: 11px;
			}
			.title_p {
				-webkit-box-flex: 1;
				line-height: 44px;
				text-align: -webkit-center;
				margin-right: 60px;
			}
			.title_p p {
				color: #ffffff;
				font-size: 18px;
			}
			.list_ly {
				width: 100%;
				height: 50px;
				display: -webkit-box;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.list_ly_left {
				height: 50px;
				line-height: 50px;
				-webkit-box-flex: 1;
			}
			.list_ly_left p {
				padding-left: 10px;
			}
			.list_ly_right {
				height: 50px;
				line-height: 50px;
				-webkit-box-flex: 2;
				text-align: -webkit-right;
				margin-right: 10px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.orders {
				width: 100%;
				height: 50px;
				position: absolute;
				bottom: 0px;
			}
			.orders_text {
				padding-right: 15px;
			}
			.mask {
				position: absolute;
				top: 0px;
				filter: alpha(opacity=60);
				background-color: #777;
				z-index: 1002;
				left: 0px;
				opacity: 0.5;
				-moz-opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>
					<div class="list_ly">
						<div class="list_ly_left">
							<p>
								姓名:
							</p>
						</div>
						<div class="list_ly_right">
							<p id="name"></p>
						</div>
					</div>
					<div class="div_divider"></div>
				</li>
				<li>
					<div class="list_ly">
						<div class="list_ly_left">
							<p>
								缴费岗位:
							</p>
						</div>
						<div class="list_ly_right one_line1" id="fcxt" style="width:70%">
							<!--<p>方向-层级-序列&nbsp;报名费<span style="color: red">(390)</span></p>-->
						</div>
					</div>
					<div class="div_divider"></div>
				</li>
				<li>
					<div class="list_ly">
						<div class="list_ly_left">
							<p>
								费用:
							</p>
						</div>
						<div class="list_ly_right">
							<p id="pay_cost"></p>
						</div>
					</div>
					<div class="div_divider"></div>
				</li>
				<li>
					<div class="list_ly">
						<div class="list_ly_left">
							<p>
								交易方 &nbsp
							</p>
						</div>
						<div class="list_ly_right">
							<p>
								北京络捷斯特科技发展股份有限公司
							</p>
						</div>
					</div>
					<div class="div_divider"></div>
				</li>
				<li>
					<div class="list_ly">
						<div class="list_ly_left">
							<p>
								交易类型:
							</p>
						</div>
						<div class="list_ly_right">
							<p>
								即时到账交易
							</p>
						</div>
					</div>
					<div class="div_divider"></div>
				</li>
				<li>
					<div class="list_ly">
						<div class="list_ly_left">
							<p>
								友情提示:
							</p>
						</div>
						<div class="list_ly_right">
							<p>
								缴费成功后，审核通过即可学习
							</p>
						</div>
					</div>
					<div class="div_divider"></div>
				</li>
			</ul>
			<div class="orders">
				<!--<div style="width: 100%;height: 40px;background: #ffffff;line-height: 40px;text-align: -webkit-right;">
				<p class="orders_text">共<span>1</span>件商品&nbsp;小计：<span style="color: red" id="money_id1"></span></p>
				</div>-->
				<div class="div_divider"></div>
				<div style="display:-webkit-box;width: 100%;height: 50px;">
					<div style="-webkit-box-flex:1;background: #ffffff;line-height: 50px; padding-left: 10px;">
						<p class="orders_text">
							共<span style="color: red">1</span>件商品&nbsp;
							合计：<span style="color: red" id="moneyId1"></span>
						</p>
					</div>
					<div style="width:110px;height: 46px;background: red;line-height: 46px;text-align: -webkit-center;margin-top: 2px" onclick="upload()">
						<p style="color: #FFFFFF">
							提交订单
						</p>
					</div>
				</div>
			</div>
			<div id="mask" class="mask"></div>
			<div id="offlineAlert" class="weui_dialog_confirm" style="display: none;">
				<div class="weui_mask"></div>
				<div class="weui_dialog">
					<div class="weui_dialog_hd">
						<strong class="weui_dialog_title ">支付未完成,确认退出</strong>
					</div>
					<div class="weui_dialog_bd"></div>
					<div class="weui_dialog_ft">
						<a onclick="cleanCancel()" href="#" class="weui_btn_dialog default"  style="color:#18b4ed">取消</a>
						<a onclick="cleanConfirm()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/requestTool.js"></script>
	<script src="../../script/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript">
		apiready = function() {
			$('#name').html($api.getStorage("cfnetpprealname"));
			$('#pay_cost').html("￥" + $api.getStorage("pay_money"));
			$('#moneyId1').html("￥" + $api.getStorage("pay_money"));
			SendBehaviorTrajectoriesNotifi1(0, '岗位支付', '123',api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname,  document.title);
			writefcxt();
			api.addEventListener({
				name : 'close_frame'
			}, function(ret, err) {
				$("#mask").hide();
				api.closeFrame({
					name : 'Affrim'
				});
				$('#offlineAlert').show();
			});
		};
		//取消
		function cleanCancel() {
			$('#offlineAlert').hide();
		}

		//确定
		function cleanConfirm() {
			$('#offlineAlert').hide();
			api.sendEvent({
				name : 'jumpPage',
				extra : {
					page : 3
				}
			});
			api.closeWin({
				name : "MyAPPly"
			});
			api.closeWin({
				name : "Detaila"
			});
			api.closeWin({
			});
		}

		function writefcxt() {
			datas = '<p>' + $api.getStorage("jobs") + "</p>";
			$("#fcxt").html(datas);
		}

		function upload() {
			$("#mask").css("height", $(document).height());
			$("#mask").css("width", $(document).width());
			$("#mask").show();
			api.openFrame({
				name : 'Affrim',
				url : 'Affrim.html',
				rect : {
					x : 0,
					y : api.winHeight * 0.4,
					w : api.winWidth,
					h : api.winHeight * 0.6
				}
			});
			SendBehaviorTrajectoriesNotifi1(1, '岗位支付', '123',api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname,  document.title);
		}

		function close_mark() {
			$("#mask").hide();
		}
	</script>
</html>